<template>
  <div>
    <el-table
      class="table-bg"
      :data="list">
      <el-table-column
        prop="id"
        label="id"
        width="40">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="summary"
        label="文章概要">
      </el-table-column>
      <el-table-column
        prop="content"
        label="文章内容">
      </el-table-column>
      <el-table-column
        prop="comment_count"
        label="评论数">
      </el-table-column>
      <el-table-column
        prop="view"
        label="浏览次数">
      </el-table-column>
      <el-table-column
        prop="user"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="is_hot"
        label="热门">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="editData(scope.row.id)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteData(scope.row.tid)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getArticles, deleteArticle} from 'api/article'
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this._getList()
  },
  methods: {
    createData () {
      this.$router.push({path: `/admin/article/edit/`})
    },
      editData (id) {
      this.$router.push(`/admin/article/edit/${id}`)
    },
    deleteData (tid) {
      deleteArticle({tid}).then(res => {
        this._getList()
      })
    },
    _getList () {
      getArticles({page: 1, size: 10}).then(res => {
        this.list = res.data
      })
    }
  }
}
</script>

<style scoped>
.table-bg{
  background-color: rgba(255,255,255,.1)
}
</style>
